<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<base target="_blank">
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.5"></script>
<script src="js/plugins/peity/jquery.peity.min.js"></script>
<script src="js/content.min.js?v=1.0.0"></script>
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script src="js/demo/peity-demo.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/common.js"></script>
<style type="text/css">
#tableDiv {
	float: left;
	width: 500px;
}

#sel>select {
	width: 200px;
	height: 35px;
	float: left;
}

#sel {
	width: 100%;
	height: 50px;
	padding: 5px;
}
</style>
<title>滨海基金 -销售图表</title>

</head>

<body>
	<div class="ibox-title"
		style="border-color: #e7eaec; border-bottom-style: solid;">
		<h5>
			销售 <small>排名,图表</small>
		</h5>
		<div class="ibox-tools">
			<!-- <a class="btn  btn-sm btn-bitbucket" onclick="exportXLS()"> <i
				class="fa fa-share-square-o"></i> 导出xls
			</a> -->
			<button type="button" data-toggle="dropdown"
				style="border: none; color: white;"
				class="btn  btn-sm btn-bitbucket">
				导出xls <span class="caret"></span>
			</button>
			<ul class="dropdown-menu" role="menu" style="left: -90px">
				<li><a onclick="exportXLS('all')" class="fa fa-share-square-o">&nbsp;导出所有员工数据</a></li>
				<li><a onclick="exportXLS('this')" class="fa fa-share-square-o">&nbsp;导出当前页面数据</a></li>
			</ul>
		</div>
	</div>
	<div class="ibox-content">
		<div id="sel">
			<input type="hidden" id="userBranchId"
				value="${loginUser.branch.branchId }" /> <input type="hidden"
				id="userTeamId" value="${loginUser.team.branchId }" /> <input
				type="hidden" id="userQuarters" value="${loginUser.quarters }" /> <input
				type="hidden" value="${canNotReadAllMessage}"
				name="canNotReadAllMessage" id="canNotReadAllMessage"> <input
				type="hidden" value="${deptId}" name="defautDeptId"
				id="defaultDeptId"> <input type="hidden" value="${branchId}"
				name="defautBranchId" id="defaultBranchId"> <input
				type="hidden" value="${teamId}" name="defautTeamId"
				id="defaultTeamId"> <select class="form-control"
				onchange="typeChange()" id="date">
				<option selected="selected" value="">全部</option>
				<option value="thisYear">全年</option>
				<option value="thisMonth">本月</option>
				<option value="lastMonth">上月</option>
				<option value="1">第一季度</option>
				<option value="2">第二季度</option>
				<option value="3">第三季度</option>
				<option value="4">第四季度</option>

			</select> <%-- <select class="form-control"
				<c:if test="${loginUser.quarters eq 0 or loginUser.quarters eq 1 or loginUser.quarters eq 2 or loginUser.quarters eq 3 }">disabled="disabled"</c:if>
				style="width: 210px;" id="company"
				onchange="cpmpanyChage(this.value,'branch')">
				<c:forEach var="dept" items="${dept }">
					<option value="${dept.deptId }"
						<c:if test="${isCanMod >=1  }">selected="selected" </c:if>>${dept.deptName }(${dept.remake })</option>
				</c:forEach>
			</select> <select class="form-control" style="width: 150px;"
				<c:if test="${loginUser.quarters eq 0 or loginUser.quarters eq 1 or loginUser.quarters eq 2  }">disabled="disabled"</c:if>
				id="branch" onchange="branchChage(this.value,'team')">
				<option value="">-请选择部门-</option>
				<c:if test="${isCanMod ==1  }">
					<c:forEach var="branchList" items="${branchList }">
						<option value="${branchList.branchId }">${branchList.branchName }</option>
					</c:forEach>
				</c:if>
				<c:if test="${isCanMod >=2  }">
					<c:forEach var="branchList" items="${branchList }">
						<option value="${branchList.branchId }" selected="selected">${branchList.branchName }</option>
					</c:forEach>
				</c:if>
			</select> <select class="form-control" style="width: 150px;"
				<c:if test="${loginUser.quarters eq 0 or loginUser.quarters eq 1 }">disabled="disabled"</c:if>
				onchange="typeChange()" id="team">
				<option value="">-请选择团队-</option>
				<c:if test="${isCanMod ==2  }">
					<c:forEach var="teamList" items="${teamList }">
						<option value="${teamList.branchId }">${teamList.branchName }</option>
					</c:forEach>
				</c:if>
				<c:if test="${isCanMod ==3  }">
					<c:forEach var="teamList" items="${teamList }">
						<option value="${teamList.branchId }" selected="selected">${teamList.branchName }</option>
					</c:forEach>
				</c:if>
			</select> --%>
			<select class="form-control" style="width: 200px" id="company"
				onchange="cpmpanyChage(this.value)">
				<%-- <c:forEach var="dept" items="${dept }">
					<option value="${dept.deptId }">${dept.deptName }（${dept.remake }）</option>
				</c:forEach> --%>
			</select> <select class="form-control" style="width: 150px" id="branch"
				onchange="branchChage(this.value)">
				<option value="">-请选择-</option>
			</select> <select class="form-control" style="width: 150px"
				onchange="typeChange()" id="team" onchange="">
				<option value="">-请选择-</option>
			</select>
		</div>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div>
			<div id="main" style="width: 900px; height: 400px; float: left;"></div>
			<div id="tableDiv">
				<div>
					<table class="table">
						<thead>
							<tr>
								<th>序号</th>
								<th>名称</th>
								<th>销售额</th>
							</tr>
						</thead>
						<tbody id="tbodyData">
						</tbody>
					</table>

				</div>
			</div>
		</div>
	</div>

	<!-- 隐藏一个div-form，作为导出xls使用 -->
	<div style="display: none">
		<form id="exportForm">
			<input id="export-title" name="title" value="销售排名"> <input
				id="export-type" name="type"> <input id="export-date"
				name="date"> <input id="export-deptOption" name="deptOption">
			<input id="export-branchOption" name="branchOption"> <input
				id="export-teamOption" name="teamOption"> <input
				id="export-canNotReadAllMessage" name="canNotReadAllMessage">
		</form>
	</div>
	<script type="text/javascript">
		$(function() {
			cpmpanyDept();
		});
		// 基于准备好的dom，初始化echarts实例
		var bar = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		var barOption = {
			title : {
				text : '销售前十'
			},
			color : [ '#3398DB' ],
			tooltip : {},
			legend : {
				left : 'center',
				data : []
			},
			xAxis : {
				data : []
			},
			yAxis : {
				left : 100,
				type : 'value'
			},
			series : [ {
				name : '销售额',
				type : 'bar',
				data : [ 35, 20, 16, 10, ],
				itemStyle : {
					//通常情况下：
					normal : {
						color : function(params) {
							var colorList = [ 'rgb(25,46,94)',
									'rgb(42,170,227)', 'rgb(164,205,238)',
									'rgb(195,229,235)' ];
							return colorList[params.dataIndex];
						}
					},
					//鼠标悬停时：
					emphasis : {
						shadowBlur : 10,
						shadowOffsetX : 0,
						shadowColor : 'rgba(0, 0, 0, 0.5)'
					}
				},
			} ]
		};
		// 使用刚指定的配置项和数据显示图表。
		bar.setOption(barOption);
		loadOption();
		function typeChange() {
			var date = $("#date>option:selected").val();
			var quarter = $("#quarter>option:selected").val();
			var deptOption = $("#company>option:selected").val();
			var branchOption = $("#branch>option:selected").val();
			var teamOption = $("#team>option:selected").val();
			var canNotReadAllMessage = $("#canNotReadAllMessage").val();
			console.log(canNotReadAllMessage)
			loadOption(date, quarter, deptOption, branchOption, teamOption);
		}
		function loadOption(date, quarter, deptOption, branchOption, teamOption) {
			var canNotReadAllMessage = $("#canNotReadAllMessage").val();
			$.ajax({
				url : 'rankSaleChart.do',
				data : {
					method : 'emp',
					date : date,
					quarter : quarter,
					deptOption : deptOption,
					branchOption : branchOption,
					teamOption : teamOption,
					canNotReadAllMessage : canNotReadAllMessage
				},
				type : 'post',
				dataType : 'json',
				async : false,
				success : function(data) {
					//console.log(data.countSale);
					console.log(data.emp);
					if (data != null) {
						// 填入数据
						bar.setOption({
							legend : {
								data : data.emp
							},
							xAxis : {
								data : data.emp,
								 axisLabel:{  
			                         interval:0,//横轴信息全部显示  
			                         rotate:-30,//-30度角倾斜显示  
			                    }  
								
							},
							series : [ {
								// 根据名字对应到相应的系列
								data : data.countSale
							} ]
						});
						$("#tbodyData").empty();
						$.each(data.list, function(index, ChartSales) {
							$("#tbodyData").append(
									"<tr><td>" + parseInt(index + 1)
											+ "</td><td>" + ChartSales.name
											+ "</td><td>"
											+ ChartSales.countSalesAmount
											+ "</td></tr>")
						});
						return;
					}
					//弹框插件
				},
				error : function() {
					alert("不好意思请求失败了");
				}
			});
		}

		function cpmpanyDept() {
			$.ajax({
				url : "getDeptInfo.do",
				type : "post",
				dataType : "json",
				success : function(result) {
					if (result.code == 0) {
						var branchHtml = "";
						if(result.quarters==5 || result.quarters==6){
								branchHtml += "<option value=\"\" >-全部分公司-</option>";
							}
						for (var i = 0; i < result.data.length; i++) {
							branchHtml += "<option value=\""
									+ result.data[i].deptId + "\">"
									+ result.data[i].deptName + "(" +result.data[i].remake+")</option>";
						}
						$("#company").append(branchHtml);
						$("#company").trigger("change");

					} else {
						sweetAlert("提示", "操作失败,请刷新后重试!", "error");
					}
				},
				error : function() {
					sweetAlert("异常", "网络出现异常!", "error");
				}
			});// ajax end;
	}
	function cpmpanyChage(id) {
			if ($("#company").val() != "" && $("#company").val() != null) {
				$.ajax({
					url : "getBranchInfo.do",
					type : "post",
					data : {
						id : id
					},
					dataType : "json",
					success : function(result) {
						if (result.code == 0) {
							var branchHtml = "";
							if(result.quarters!=2 && result.quarters!=1){
								branchHtml += "<option value=\"\" >-请选择-</option>";
							}
							for (var i = 0; i < result.branch.length; i++) {
								branchHtml += "<option value=\""
										+ result.branch[i].branchId + "\">"
										+ result.branch[i].branchName +"</option>";
							}
							$("#branch").empty();
							$("#branch").append(branchHtml);
							$("#branch").trigger("change");

						} else {
							sweetAlert("提示", "未知异常!", "error");
						}
					},
					error : function() {
						sweetAlert("异常", "网络出现异常!", "error");
					}
				});// ajax end;
			}else{
				$("#branch").empty();
				$("#branch").append("<option value=\"\" >-请选择-</option>");
				$("#branch").trigger("change");
			}
			
		}
		function branchChage(id) {  	
			if ($("#branch").val() != "" && $("#branch").val() != null) {
				$.ajax({
					url : "getTeamInfo.do",
					type : "post",
					data : {
						id : id
					},
					dataType : "json",
					success : function(result) {
						if (result.code == 0) {
							var branchHtml = "";
							if(result.quarters!=1){
								branchHtml += "<option value=\"\" >-请选择-</option>";
							}
							for (var i = 0; i < result.data.length; i++) {
								branchHtml += "<option value=\""
										+ result.data[i].branchId + "\">"
										+ result.data[i].branchName + "</option>";
							}
							$("#team").empty();
							$("#team").append(branchHtml);
							typeChange();
						} else {
							sweetAlert("提示", "未知异常!", "error");
						}
					},
					error : function() {
						sweetAlert("异常", "网络出现异常!", "error");
					}
				});// ajax end;
			}else{
   				$("#team").empty();
   				$("#team").append("<option value=\"\" >-请选择-</option>");
   				typeChange();
   			}
			
		}


		function exportXLS(type) {
			var date = $("#date>option:selected").val();
			var deptOption = $("#company>option:selected").val();
			var branchOption = $("#branch>option:selected").val();
			var teamOption = $("#team>option:selected").val();
			var canNotReadAllMessage = $("#canNotReadAllMessage").val();

			$("#export-date").val(date);
			$("#export-deptOption").val(deptOption);
			$("#export-branchOption").val(branchOption);
			$("#export-teamOption").val(teamOption);
			$("#export-canNotReadAllMessage").val(canNotReadAllMessage);
			$("#export-type").val(type);

			$('#exportForm').attr('action', 'rankCharExport');
			//         	$('#exportForm').attr('target','_blank');
			$('#exportForm').submit();
		}
	</script>
</body>

</html>